<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>浮动</title>
    <style>
        #head {
            border: 1px #CCC solid;
            width: 410px;
            height: 100px;
            margin-bottom: 10px;
            text-align: center;
            line-height: 100px;
        }

        #main {
            border: 1px #CCC solid;
            width: 400px;
            height: 400px;
            margin-bottom: 10px;
            padding: 5px;
        }

        #left {
            border: 1px #CCC solid;
            width: 198px;
            height: 198px;
            margin-right: 20px;
            float: left;
        }

        #right {
            border: 1px #CCC solid;
            width: 193px;
            height: 198px;
            margin-left: 5px;
            float: right;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }

        .clearfix:after {
            clear: both;
        }

        .center-table {
            display: table;
            height: 250px;
            background: white;
            width: 240px;
            margin: 20px;
        }

        .center-table p {
            display: table-cell;
            margin: 0;
            background: black;
            color: white;
            padding: 20px;
            border: 10px solid white;
            vertical-align: middle;
        }

    </style>
</head>

<body>
    <div id="head">头部</div>
    <div id="main">
        <div id="left">左侧</div>
        <div style="clear:both;"></div>

        <p>
            今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期今天我想放个假期
        </p>
        <div class="center-table">
            <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
        </div>

    </div>
</body>

</html>
